<template>
  <div>
    <div class="app-container">
      <el-card class="box-card">
      <div size="25px" style="padding:20px;font-size:20px ">商品（Spu）介绍</div>
      <el-form class="el-dialog__body" :model="formSubmit" :rules="rules" ref="formSubmit" label-position="right" label-width="150px" >
              <el-form-item  label="商品名称" prop="title">
                <el-input style="width: 350px;" clearable v-model="formSubmit.title"></el-input>
              </el-form-item>
              <el-form-item  label="所属供应商" prop="supplierId" >
            <el-select v-model="formSubmit.supplierId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.supplierName"
                :value="item.id">
              </el-option>
            </el-select>
        </el-form-item>
        <!-- <el-form-item label="第三方Spu编码" prop="three">
                <el-input style="width: 350px;" clearable v-model="ruleForm.three"></el-input>
              </el-form-item> -->
              <el-form-item label="原始价格" prop="voOriginalPrice">
                <el-input v-model="formSubmit.voOriginalPrice" style="width: 350px;" clearable controls-position="right" @change="handleChange" ></el-input>
              </el-form-item>
              <el-form-item label="当前价格"  prop="voPrice">
                <el-input v-model="formSubmit.voPrice" style="width: 350px;" clearable controls-position="right" @change="handleChange" ></el-input>
              </el-form-item>
            
              <!-- <el-form-item label="运费模板" prop="type" >
          <el-select v-model="ruleForm.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item> -->
        <el-form-item label="是否在售" prop="state">
                <el-radio-group v-model="formSubmit.state">
                <el-radio :label="1">在售</el-radio>
                <el-radio :label="0">下架</el-radio>
              </el-radio-group>
              </el-form-item>

              <el-form-item label="首页显示" prop="homeShow">
                <el-radio-group v-model="formSubmit.homeShow">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              </el-form-item>
              <el-form-item label="商品图片" >
                <el-upload
                 action=""
                class="avatar-uploader"
                :show-file-list="false"
                :http-request="submitFileForm"
                :on-change="handleFileChange"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="formSubmit.img" :src="formSubmit.img" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
              </el-form-item>

              <el-form-item  label="商品单位" prop="unit">
                <el-input clearable v-model="formSubmit.unit" placeholder="盒/个/件"></el-input>
              </el-form-item>
              <el-form-item  label="所属类目" prop="categoryId">
              <el-cascader
                v-model="formSubmit.categoryId"
                :options="option"
                :props="{ expandTrigger: 'hover' , label: 'categoryName', value: 'id'}"
                @change="handleChange"></el-cascader>
                </el-form-item>
              <el-form-item label="描述" prop="description">
                <el-input style="width:400px;" clearable v-model="formSubmit.description" placeholder="盒/个/件"></el-input>
              </el-form-item>
              <el-form-item  label="商品详细介绍">
                <el-card style="height: 610px;">
                  <quill-editor v-model="formSubmit.detail" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
                  </quill-editor>
                </el-card>
              </el-form-item>

        </el-form>
      </el-card>
    </div>
    <!-- <div class="app-container">
      <el-card class="box-card">
      <div size="25px" style="padding:20px;font-size:20px">商品类型(sku)</div>
                <el-button type="primary" plain style="margin-left:10px" size="medium" @click="dialogTableVisible = true">添加</el-button>
                <el-dialog title="创建sku" :visible.sync="dialogTableVisible">
                <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" >
                <el-form-item label="第三方Sku编码" prop="three">
                <el-input style="width: 350px;" clearable v-model="ruleForm.three"></el-input>
                </el-form-item>

               <el-form-item label="类型条码" prop="code">
                <el-input style="width: 350px;" clearable v-model="ruleForm.code"></el-input>
                </el-form-item>
                <el-form-item label="类型名称" prop="typ">
                <el-input style="width: 350px;" clearable v-model="ruleForm.typ"></el-input>
                </el-form-item>
                <el-form-item  label="图片(可空)" >

                <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
              <el-form-item label="原始价格(元)" prop="num">
                <el-input-number v-model="ruleForm.num" :precision="2" :step="0.1" :max="10"></el-input-number>
              </el-form-item>
              <el-form-item label="当前价格(元)" prop="num2">
                <el-input-number v-model="ruleForm.num2" :precision="2" :step="0.1" :max="10"></el-input-number>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogTableVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
      </el-dialog>

        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="Skuld"
            width="180">
          </el-table-column>
          <el-table-column
            prop="date"
            label="第三方Sku编码"
            width="180">
          </el-table-column>
          <el-table-column
            prop="date"
            label="Sku条形码"
            width="180">
          </el-table-column>
          <el-table-column
            prop="date"
            label="类型名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="原价/元"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="现价/元">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="150"
          >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="dialogTableVisible = true" >详情</el-button>
            <el-button type="danger" size="small" @click="open" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-card>
    </div>
    <div class="app-container">
      <el-card class="box-card">
        <div size="25px" style="padding:20px;font-size:20px " >商品类型(sku)</div>
                <el-button type="primary" plain style="margin-left:10px" size="medium" @click="dialogTableVisibles = true">添加</el-button>
                <el-dialog title="设置商品参数" :visible.sync="dialogTableVisibles">
                <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" >
                <el-form-item label="商品参数名称" prop="three">
                <el-input style="width: 350px;" clearable v-model="ruleForm.three"></el-input>
              </el-form-item>
              <el-form-item label="商品参数值"prop="can" >
                <el-input style="width: 350px;" clearable v-model="ruleForm.can"></el-input>

              </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogTableVisibles = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>

        </el-dialog>
          <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="Skuld"
            width="400">
          </el-table-column>
          <el-table-column
            prop="date"
            label="第三方Sku编码"
            width="400">
          </el-table-column>
          <el-table-column
            prop="date"
            label="Sku条形码"
            width="400">
          </el-table-column>
        </el-table>
      </el-card>
    </div> -->
    <div class="app-container">
      <el-button  style="margin-left:10px" size="medium" >取消</el-button>
      <el-button type="primary" v-if="this.$route.query.id > 0" style="margin-left:10px" size="medium" @click="submit()">更新商品</el-button>
        <el-button type="primary"  v-else style="margin-left:10px" size="medium" @click="submit()">添加商品</el-button>
       
    </div> 

  </div>
</template>
<script>
  import {
    quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  export default {
    components: {
        quillEditor
      },
    data() {
      return {

        formSubmit:{
          id:'',
          title: '',
          state: 1,
          img: '',
          categoryId: '',
          supplierId:'',

          // createUser: '陕西永辉彩食鲜',
          unit: '',
          description: '',
          detail:'',
          voOriginalPrice: '',
          voPrice: '',
          homeShow: false,
        },

        content: null,
        editorOption: {},
        dialogImageUrl: '',
        dialogTableVisibles: false,
        dialogTableVisible: false,
        dialogFormVisible: false,
        num:1,
        form:{
              name:'',
              text:''
            },
            ruleForm: {
              name: '',
              region: '',
              three: '',
              num: '',
              num2: '',
              type:'',
              choice: '',
              code: '',
              typ: '',
              can: '',
          },
          rules: {
            supplierId: [{
              message: '供应商不能为空', required:true
            }],
            title:[{
              message: '名称不能为空', required:true
            }],
            categoryId:[{
              message: '类目不能为空', required:true
            }],
            unit:[{
              message: '类目不能为空', required:true
            }]
          },
            value: '',
            reverse: true,
            options: [{
            value: '选项1',
            label: '一级目录'
          }, {
            value: '选项2',
            label: '二级目录'
          }],
          option: [{}]
      }
    },

    created() {
      this.getTidList()
      this.getSupList()
     
    
    },

    methods: {



      beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },

    getOne(){
      console.log(this.$route.query)
      if (this.$route.query.id > 0){
        this.formSubmit.id = this.$route.query.id
        this.$request({
         url: '/goods/getOne/' + this.$route.query.id,
         method: 'get'
      }).then(res => {
        if (res.success){
          var arr = []
          this.formSubmit.title = res.data.title
          this.formSubmit.state = res.data.state
          this.formSubmit.img = res.data.img
          this.formSubmit.categoryId = res.data.categoryId
          this.formSubmit.unit = res.data.unit
          this.formSubmit.description = res.data.description
          this.formSubmit.detail = res.data.detail
          this.formSubmit.voOriginalPrice = res.data.voOriginalPrice
          this.formSubmit.voPrice = res.data.voPrice
          this.formSubmit.supplierId = res.data.supplierId
          this.formSubmit.homeShow = res.data.homeShow
          var arr = []
          console.log(this.option)
          if (this.option.length > 1){
            this.option.forEach(item => {
              item.children.forEach(item1 => {
                  if (item1.id == res.data.categoryId){
                      arr.push(item.id)
                      arr.push(item1.id)
                  }
              })
          })
          console.log(arr)
          this.formSubmit.categoryId = arr
          }
        
        }
      })
      }
    },


      submitFileForm() {
      const formData = new FormData()
      this.fileList.forEach(file => {
        formData.append('fs', file.raw)
      })
      this.$request({
        url: '/file/upload',
        method: 'post',
        data: formData
      }).then(res => {
        if (res.success) {
          this.formSubmit.img = res.data[0].fileUrl
          this.$notify.success('上传成功')
        } else {
          this.$notify.warning(res.errMessage)
        }
      })
    },

    handleFileChange(file, fileList) {
      this.fileList = fileList
    },


      getTidList(){
          this.$request({
              url: '/category/tidList',
              method: 'post',
              data: {
                page:{
                  page: 1,
                  pageSize: 1000
                }
               
              }
          }).then(res => {
              if (res.success){
                  res.data.forEach(item => {
                      item.children.forEach(item1 => {
                          if (item1.children.length < 1){
                              item1.children = undefined
                          }
                      })
                  })
                  this.option = res.data
              }
          })
          if (this.option.length > 0){
            this.getOne()
          }
          else{
            this.getTidList()
          }
      },



      getSupList(){
          this.$request({
              url: '/supplier/lists',
              method: 'post',
              data: {
                page:{
                  page: 1,
                  pageSize: 1000
                }
              }
          }).then(res => {
              if (res.success){
                  this.options = res.data
              }
          })
      },
    


      submit(){
        console.log(this.formSubmit.categoryId)
        this.formSubmit.categoryId =  this.formSubmit.categoryId[1]
        this.formSubmit.id = this.$route.query.id
        console.log(this.formSubmit.id, "id")
        console.log(this.$route.query.length < 1)
        if (this.formSubmit.id == undefined){
          this.$refs['formSubmit'].validate(valid => {
            if (valid){
              this.$request({
                  url: '/goods/save',
                  method: 'post',
                  data: this.formSubmit
              }).then(res => {
                   if (res.success){
                      this.$notify.success("成功")
                      this.$router.go(-1)
                   } else {
                     this.$notify.warning(res.errMessage)
                   }
                   
              })
            }
           })
        } else {
          this.$refs['formSubmit'].validate(valid => {
            if (valid){
              this.$request({
                  url: '/goods/update',
                  method: 'post',
                  data: this.formSubmit
              }).then(res => {
                   if (res.success){
                      this.$notify.success("成功")
                      this.$router.go(-1)
                   } else {
                     this.$notify.warning(res.errMessage)
                   }
                   
              })
            }
        })
        }
       
             
            
      },

    


        handleChange(value) {
          console.log(value);
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
         submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
      }
  }
</script>

<style>
   .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>